<template>
  <div class="load-fail-wrapper">
    <div class="load-fail-main" @click="handleClick">
      <img :src="loadingFailImg"/>
      <p v-if="tip == null">页面加载失败<br>请检查网络后，点击刷新</p>
      <p v-else v-html="tip"></p>
    </div>
  </div>
</template>

<script>
import loadingFailImg from './load-fail.png'

export default {
  props: ['tip'],
  data () {
    return {
      loadingFailImg
    }
  },
  methods: {
    handleClick () {
      this.$emit('handleClick')
    }
  }
}
</script>

<style lang="stylus" scoped>
.load-fail-wrapper
  width 100%
  height 100%
  text-align center
  font-size 16px
  padding-top 120px
.load-fail-main
  display inline-block
  margin auto 0
  text-align center
  img
    width 90px
  p
    color #999
</style>

